<template>
  <div class="team_center">
    <div class="team_card" v-for="teamData in teamList" :key="teamData.team_id">
      <div class="tc_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ teamData.s_name }}</span>
      </div>
      <div>
        <ul class="tc_mes">
          <li>
            项目名称：<span>{{ teamData.p_title }}</span>
          </li>
          <li>
            指导老师：<span>{{ teamData.t_name }}</span>
          </li>
          <li>
            所需时间：<span>{{ teamData.p_tiem }}</span>
          </li>
          <li>
            项目难度：<span>{{ teamData.p_dif }}</span>
          </li>
          <li>审批状态：<span>申请已通过</span></li>
          <li>
            所需人数：<span>{{ teamData.p_peopleNum }}</span>
          </li>
          <li>
            现有人数：<span>{{ teamData.t_peopleNum }}</span>
          </li>
        </ul>
      </div>
      <div>
        <el-button
          size="small "
          type="primary"
          round
          @click="teamParticulars(teamData.team_id,teamData.id)"
          >了解详情</el-button
        >
        <el-button
          size="small "
          type="success"
          @click="joinTeam(teamData.team_id)"
          round
          >加入队伍</el-button
        >
        <el-button
          size="small "
          type="warning"
          @click="openLeaveWord(teamData.s_id)"
          round
          >回复沟通</el-button
        >
      </div>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      teamList: [],
      dialogFormVisible: false,
      leaveWordTo: -1,
      form: {
        leaveWord: "",
      },
    };
  },
  name: "teamCenter",
  mounted() {
    this.getTeamList();
  },
  methods: {
    getTeamList() {
      axios.post(`http://localhost:3000/student/teamList`).then((ret) => {
        this.teamList = ret.data.teamList;
      });
    },
    teamParticulars(id1,id2) {
      this.$router.push({ path: "/Team", query: { team_id: id1, p_id: id2 } });
    },
    joinTeam(id) {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post(`http://localhost:3000/student/joinTeam`, { s_id, team_id: id })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "申请已发送！等待队长处理",
              type: "success",
            });
          } else if(ret.data.code == 3) {
            this.$message({
              showClose: true,
              message: "你已存在改队伍中!!",
              type: "error",
            });
          }else if (ret.data.code == 4) {
            this.$message({
              showClose: true,
              message: "你已提交过申请等待审批!!",
              type: "error",
            });
          }else {
            this.$message({
              showClose: true,
              message: "你不能同时加入多支队伍",
              type: "error",
            });
          }
        });
    },
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord(id) {
      this.dialogFormVisible = true;
      this.leaveWordTo = id;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        var token = localStorage.getItem("token");
        var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        var w_time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/student/writeLeaveWord`, {
            u_id,
            w_main: this.form.leaveWord,
            w_time,
            w_type: 3,
            w_to: this.leaveWordTo,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "留言成功",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.team_center {
  padding: 20px;
}
.team_card {
  width: 85%;
  height: 100px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 1xp solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.tc_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tc_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #40c9c6;
}
.tc_mes {
  width: 600px;
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tc_mes > li {
  width: 33%;
  font-size: 14px;
  color: #606266;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.tc_mes > li > span {
  padding: 0 5px;
}
.tc_mes > li:first-of-type {
  width: 100%;
  color: #303133;
  font: 18px/24px "";
  margin-bottom: 10px;
}
</style>
